<template>
	<a-modal v-bind="option" class="chart-move-out-dialog">
		<a-form ref="formRef" :model="params">
			<a-form-item label="房源地址" name="houseAddress">
				<a-input disabled :value="params.houseAddress" />
			</a-form-item>
			<a-form-item label="搬离日期" name="quiteDateValue" :rules="[{required: true, message: '请选择搬离日期'}]">
				<a-date-picker :disabledDate="disabledDate" v-model:value="params.quiteDateValue" />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button @click="option.onCancel" :loading="loading">取消</a-button>
			<a-button type="primary" @click="submit" :loading="loading">确定</a-button>
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
	import {reactive, ref, toRef, watch} from 'vue'
	import dayjs from 'dayjs'
	import DATE_FORMAT from 'yuxin-base/src/utils/date'
	import {charterCheckOutHouse, employeeCheckinDetails} from '@/api/contract'
	import {message} from 'ant-design-vue'

	const props = defineProps<{
		visible: boolean
		info?: any
		id?: string
	}>()
	const emits = defineEmits(['update:visible', 'success'])
	const option = reactive({
		title: '搬离',
		width: '25rem',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
		}
	})
	const formRef = ref()
	const params = ref<any>({})
	const loading = ref(false)

	// 除了今天都不可选
	const disabledDate = current => {
		// return dayjs(current).isBefore(dayjs().subtract(1, 'day')) 今天之前(包括今天)
		return dayjs(current).format(DATE_FORMAT.DATE) !== dayjs().format(DATE_FORMAT.DATE)
	}

	const getData = newVal => {
		// 有详情传入直接用详情 没有的话直接用id查询

		if (newVal) {
			params.value = {
				houseAddress: newVal.fullAddress,
				houseId: newVal.houseId,
				compactId: newVal.compactId,
				enterPriseContractId: newVal.enterPriseContractId,
				enterEmployeeId: newVal.enterEmployeeId,
				checkInBeginTime: newVal.checkInBeginTime,
				checkInEndTime: newVal.checkInEndTime,
				quiteDateValue: null
			}
			return
		}
		if (props.id) {
			employeeCheckinDetails(props.id).then(res => {
				const {contractId, enterPriseContractId, houseAddress, houseId, renterInfoId} = res.data
				params.value = {
					houseAddress,
					houseId,
					compactId: contractId,
					enterPriseContractId: enterPriseContractId,
					enterEmployeeId: props.id,
					checkInEndTime: '',
					quiteDateValue: null
				}
			})
		}
	}

	watch(
		() => [props.info, props.id, props.visible],
		newVal => {
			if (newVal[2]) {
				getData(newVal[0])
			}
		},
		{deep: true}
	)

	const submit = () => {
		formRef.value?.validate().then(() => {
			loading.value = true
			params.value.checkInEndTime = dayjs(params.value.quiteDateValue).format(DATE_FORMAT.DATE)

			charterCheckOutHouse(params.value)
				.then(res => {
					message.success('操作成功')
					emits('success')
					emits('update:visible', false)
				})
				.finally(() => {
					loading.value = false
				})
		})
	}
</script>

<style lang="less" scoped></style>
